<template>
	<view class="invoice_container">
		<view class="order_info">
			<view class="number">
				<view>订单编号</view>
				<view style="margin-left: 16rpx;">{{formData.orderNo}}</view>
			</view>
			<view class="amount">
				<view>开票金额</view>
				<view style="margin-left: 16rpx;color:rgb(62, 86, 186);">￥{{formData.orderAmount}}</view>
			</view>
		</view>

		<!-- 开票信息 -->
		<view class="invoice_info" v-if="!detailInfo.name">
			<view class="invoice_box">
				<view class="text1">开票信息</view>
				<view class="text2" @click="showInvoice">
					<span>选择发票</span>
					<u-icon name="arrow-right" size="12" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
		</view>
		<!-- 详细信息 -->
		<view class="detail_info" v-else>
			<view class="info_item" @click="showInvoice">
				<view class="title">名称</view>
				<view class="content">
					<view>{{detailInfo.name}}</view>
					<u-icon name="arrow-right" size="12" style="margin-left: 20rpx;"></u-icon>
				</view>
			</view>
			<view class="info_item">
				<view class="title">税号</view>
				<view class="content">
					{{detailInfo.dutyNumber}}
				</view>
			</view>
			<view class="unfold_box" v-if="foldFlag" @click="foldFlag = false">
				<view class="unfold">
					<u-icon name="arrow-down" size="9"></u-icon>
					<view style="margin-left: 10rpx;">展开</view>
				</view>
			</view>
			<view class="hidden_box" v-if="!foldFlag">
				<view class="info_item">
					<view class="title">开户银行</view>
					<view class="content">
						{{detailInfo.openBank}}
					</view>
				</view>
				<view class="info_item">
					<view class="title">银行账号</view>
					<view class="content">
						{{detailInfo.bankAccount}}
					</view>
				</view>
				<view class="info_item">
					<view class="title">公司地址</view>
					<view class="content">
						{{detailInfo.companyAddress}}
					</view>
				</view>
				<view class="info_item">
					<view class="title">公司电话</view>
					<view class="content">
						{{detailInfo.companyPhone}}
					</view>
				</view>
			</view>

			<view class="unfold_box" v-if="!foldFlag" @click="foldFlag = true">
				<view class="unfold">
					<u-icon name="arrow-up" size="9"></u-icon>
					<view style="margin-left: 10rpx;">收起</view>
				</view>
			</view>
		</view>


		<!-- 收票信息 -->
		<view class="ticket_container">
			<view class="ticket_title">收票信息</view>
			<view class="form_item">
				<view class="label">联系人</view>
				<view class="item_input">
					<u--input placeholder="请填写联系人" border="none" v-model="formData.collectBy" inputAlign="right"
						fontSize="12"
						placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
				</view>
			</view>
			<view class="form_item">
				<view class="label">联系电话</view>
				<view class="item_input">
					<u--input placeholder="请填写联系电话" border="none" v-model="formData.collectPhone" inputAlign="right"
						fontSize="12"
						placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
				</view>
			</view>
			<!-- <view class="form_item">
				<view class="label">收票地址</view>
				<view class="item_input">
					<u--input placeholder="请填写收票地址" border="none" v-model="formData.collectAddress" inputAlign="right"
						fontSize="12"
						placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
				</view>
			</view> -->
			<view class="form_item">
				<view class="label">收票地址</view>
				<view class="item_input">
					<view class="form_select" @click="selectAddress">
						<view style="color: #000;">{{formData.collectAddress}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交申请 -->
		<view class="submit" @click="submit">提交申请</view>

		<!-- 开票信息弹框 -->
		<u-popup :show="showInvoiceFlag" mode="bottom" :round="30" @close="closeInvoice" bgColor="#f4f4f4">
			<view class="pop_title">开票信息</view>
			<view class="pop_content">
				<scroll-view :scroll-into-view="toView" scroll-y="true" style="height: 580rpx;"
					scroll-with-animation="true">
					<view class="invoice_item" v-for="item in infoList" :key="item.id" @click="itemClick(item)">
						<view class="company">
							<span>{{item.name}}</span>
							<view class="label" v-if="item.isDefault">默认</view>
						</view>
						<view class="edit" @click="editInvoice(item.id)">编辑</view>
					</view>
				</scroll-view>
			</view>

			<view class="submit" @click="addHandle">添加新抬头</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		getInvoiceList
	} from "@/api/invoice.js"
	import {
		addRecordsInvoice
	} from "@/api/invoiceRecord.js"
	import {
		getDefaultAddress,
		getAddressInfo
	} from '@/api/address.js'
	export default {
		data() {
			return {
				showInvoiceFlag: false,
				foldFlag: true,
				infoList: [],
				orderId: "",
				formData: {
					orderNo: "",
					orderAmount: "",
					collectBy: "",
					collectPhone: "",
					collectAddress: ""
				},
				detailInfo: {
					name: "",
					bankAccount: "",
					companyAddress: "",
					companyPhone: "",
					dutyNumber: "",
					openBank: ""
				},
				invoiceStyle: {
					height: "880rpx"
				}
			}
		},
		onLoad(option) {
			if (option.i) {
				uni.setStorage({
					key: 'orderNo',
					data: option.i,
					success: function() {}
				});
			}
			let _that = this
			// 获取默认地址
			_that.getDefaultAddress()

			// 获取地址信息
			if (option.addressId) {
				_that.getAddressInfo(option.addressId)
			}
			uni.getStorage({
				key: 'orderNo',
				success: function(res) {
					_that.orderId = res.data
					_that.getOrderInfo()
				}
			});
			if (option.type == "addInvoice") {
				this.showInvoiceFlag = true
			}
			this.getRecordList()
		},
		methods: {
			
			prevDateFun(object) {
				let _this = this
				if (object) {
					_this.getAddressInfo(object.addressId)
				} else {
					return
				}
			},
			// 获取默认地址
			async getDefaultAddress() {
				const res = await getDefaultAddress()
				this.formData.collectAddress = res.province + res.city + res.disCoun.split(",")[0] + res.detaAddress
			},
			// 根据id获取地址信息
			async getAddressInfo(val) {
				let list = {
					id: Number(val)
				}
				const res = await getAddressInfo(list)
				this.formData.collectAddress = res.province + res.city + res.disCoun.split(",")[0] + res.detaAddress
			},
			// 获取开票信息
			async getRecordList() {
				const res = await getInvoiceList()
				this.infoList = res
			},

			// 获取订单信息
			async getOrderInfo() {
				let obj = {
					orderNo: this.orderId
				}
				const that = this
				uni.request({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/OrderList_QueryDetail',
					method: 'GET',
					data: obj,
					success(res) {
						const detail = res.data.data
						that.formData.orderNo = detail.orderNo;
						that.formData.orderAmount = detail.total
					}
				})
			},

			// 显示开票信息弹框
			showInvoice() {
				this.showInvoiceFlag = true
			},

			// 关闭开票信息弹框
			closeInvoice() {
				this.showInvoiceFlag = false
			},

			//点击开票项
			itemClick(val) {
				this.detailInfo = val
				this.showInvoiceFlag = false
			},

			// 编辑开票信息
			editInvoice(val) {
				// 跳转到开票页面
				uni.navigateTo({
					url: `/pagesA/pages/addInvoice/addInvoice?type=editInvoice&id=${val}`
				})
			},

			// 更换地址
			selectAddress() {
				// 跳转到地址页面
				uni.navigateTo({
					url: `/pagesA/pages/address/address?type=invoice`
				})
			},

			// 添加新抬头
			addHandle() {
				// 跳转到开票页面
				uni.navigateTo({
					url: `/pagesA/pages/addInvoice/addInvoice?type=addInvoice`
				})
			},

			// 提交申请
			async submit() {
				let list = {
					orderNumber: this.formData.orderNo,
					amount: this.formData.orderAmount.toString(),
					invoiceTitle: this.detailInfo.name,
					dutyNumber: this.detailInfo.dutyNumber,
					openBank: this.detailInfo.openBank,
					bankNumber: this.detailInfo.bankAccount,
					companyAddress: this.detailInfo.companyAddress,
					companyPhone: this.detailInfo.companyPhone,
					collectBy: this.formData.collectBy,
					collectPhone: this.formData.collectPhone,
					collectAddress: this.formData.collectAddress
				}
				let arr = Object.values(list)
				for (let i = 0; i < arr.length; i++) {
					if (arr[i] == "") {
						uni.showToast({
							title: '未填写完整',
							icon: 'error',
							duration: 1000,
						})
						return
					}
				}
				const res = await addRecordsInvoice(list)
				if (res) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1000,
					})
					setTimeout(() => {
						uni.redirectTo({ 
							url: `/pagesB/pages/order/order?i=3`
						})
					}, 1000)
				} else {
					uni.showToast({
						title: '提交失败',
						icon: 'none',
						duration: 2000,
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoice_container {
		background: rgb(245, 245, 245);
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		position: relative;

		.order_info {
			width: 100%;
			height: 154rpx;
			background: rgb(255, 255, 255);
			border-radius: 8rpx;
			padding: 28rpx 40rpx;
			box-sizing: border-box;

			.number {
				height: 42rpx;
				color: rgb(61, 61, 61);
				font-family: 思源黑体;
				font-size: 28rpx;
				font-weight: 400;
				display: flex;
				align-items: center;
			}

			.amount {
				height: 42rpx;
				color: rgb(61, 61, 61);
				font-family: 思源黑体;
				font-size: 28rpx;
				font-weight: 400;
				display: flex;
				align-items: center;
				margin-top: 16rpx;
			}
		}

		.invoice_info {
			height: 130rpx;
			line-height: 130rpx;
			background: rgb(255, 255, 255);
			border-radius: 16rpx;
			padding: 0 26rpx;
			margin-top: 20rpx;

			.invoice_box {
				display: flex;
				justify-content: space-between;

				.text1 {
					color: rgb(61, 61, 61);
					font-family: 思源黑体;
					font-size: 28rpx;
					font-weight: 400;
				}

				.text2 {
					color: rgb(167, 167, 167);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
				}
			}
		}

		.detail_info {
			width: 100%;
			background: rgb(255, 255, 255);
			border-radius: 8rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			margin-top: 28rpx;

			.info_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;

				.title {
					color: rgb(61, 61, 61);
					font-family: 思源黑体;
					font-size: 28rpx;
					font-weight: 400;
				}

				.content {
					color: rgb(167, 167, 167);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					align-items: center;
				}
			}

			.unfold_box {
				height: 60rpx;
				display: flex;
				justify-content: flex-end;
				color: rgb(167, 167, 167);
				font-family: 思源黑体;
				font-size: 18rpx;
				font-weight: 400;

				.unfold {
					width: 80rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
		}

		.ticket_container {
			width: 100%;
			height: 326rpx;
			background: rgb(255, 255, 255);
			border-radius: 8rpx;
			box-sizing: border-box;
			padding: 0 26rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-top: 20rpx;
			margin-bottom: 140rpx;

			.ticket_title {
				color: rgb(61, 61, 61);
				font-family: 思源黑体;
				font-size: 36rpx;
				font-weight: 400;
			}

			.form_item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.label {
					color: rgb(61, 61, 61);
					font-family: 思源黑体;
					font-size: 28rpx;
					font-weight: 400;
				}

				.item_input {
					width: 80%;

					.form_select {
						color: rgb(167, 167, 167);
						font-family: 思源黑体;
						font-size: 24rpx;
						font-weight: 400;
						text-align: right;
					}
				}
			}
		}

		.pop_title {
			margin: 0 auto;
			color: rgb(56, 56, 56);
			font-family: 思源黑体;
			font-size: 28rpx;
			font-weight: 400;
			margin-top: 20rpx;
		}

		.pop_content {
			width: 100%;
			padding: 0 48rpx;
			box-sizing: border-box;
			margin-bottom: 160rpx;

			.invoice_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 170rpx;
				background: rgb(255, 255, 255);
				border-radius: 30rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 26rpx;

				.company {
					color: rgb(0, 0, 0);
					font-family: 思源黑体;
					font-size: 32rpx;
					font-weight: 400;
					display: flex;
					align-items: center;

					.label {
						width: 60rpx;
						height: 34rpx;
						line-height: 34rpx;
						text-align: center;
						background: rgb(180, 192, 255);
						border-radius: 8rpx;
						color: rgb(62, 86, 186);
						font-family: 思源黑体;
						font-size: 18rpx;
						font-weight: 500;
						margin-left: 16rpx;
					}
				}

				.edit {
					color: rgb(126, 126, 126);
					font-family: 思源黑体;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}

		.submit {
			width: 706rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			margin: 0 auto;
			color: rgb(255, 255, 255);
			font-size: 40rpx;
			background: rgb(62, 86, 186);
			border-radius: 54rpx;
			position: fixed;
			bottom: 30rpx;
			left: 0;
			right: 0;
			z-index: 999;
		}
	}
</style>